//行业要闻 新增-编辑弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message ,Spin } from 'antd'
import { connect } from 'react-redux'
import {addMaster} from 'actions/userConter'
import Ueditor from '../../components/Ueditor'
import Uploadimg from '../../components/uploadimg'

const FormItem = Form.Item
import {
    addNews,editNews
} from 'actions/industry'
@Form.create({
    mapPropsToFields(props) {
        return {
          title: Form.createFormField({
            ...props.content,
            value: props.content.title,
          }),
          source: Form.createFormField({
            ...props.content,
            value: props.content.source,
          }),
    
        };
    } 
})

@connect(
    (state, props) => ({
      config: state.config,
    })
)

export default class ModalAddIndustryNews extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addImgUrl:'',
        detail:"",
        loading:false,
        imageflag:false//图片裁剪框
      }
    }

    /*
      执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次
    */
    componentWillMount(){
        console.log("asd");
        this.setState({
            addImgUrl: this.props.content.imageAddr,
            detail: this.props.content.detail
        })
    }

    imageuploaded() {
        this.setState({
          imageflag:true
        });
    }
      closeFn(){
        this.setState({
          imageflag:false
        });
    }
      urlFn(url){
        this.setState({
          imageflag:false,
          addImgUrl:url
        });
    }
    
    addSubmit(callback,e){//新增确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                //提交信息接口
                if(!this.state.addImgUrl){
                    message.error('请上传要闻封面');
                    return;
                }
                if(this.props.type == 1){
                    const datajson = {
                        "title":values.title,//要闻标题
                        "imageAddr":this.state.addImgUrl,//要闻地址
                        "detail":UE.getEditor('content').getContent(),//要闻说明
                        "source":values.source,//要闻来源
                    }
                    //新增
                    this.props.dispatch(addNews(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                    }))
                }else{
                    //编辑
                    const datajson = {
                        "id":this.props.content.id,
                        "title":values.title,//要闻标题
                        "imageAddr":this.state.addImgUrl,//要闻地址
                        "detail":UE.getEditor('content').getContent(),//要闻说明
                        "source":values.source,//要闻来源
                    }
                    this.props.dispatch(editNews(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg);
                            this.props.ModalCancel();
                    }))
                }
                
                
            }
        });
    }
    render () {
        const {form } = this.props
        const { getFieldDecorator } = form;
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading:true
              })
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
              }
              if (info.file.status === 'done') {
                /* 把返回的路径赋值过去 */
                this.setState({
                    addImgUrl: info.file.response.respData,
                    loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
            labelCol: {
            //   xs: { span: 24},
              sm: { span: 3 },
            },
            wrapperCol: {
            //   xs: { span: 24 },
              sm: { span: 20 },
            },
        };
        return (
            //添加大咖弹窗
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增要闻" : "编辑要闻" }
                onCancel={this.props.ModalCancel}
                footer={[
                <Button key="submit" type="primary"  onClick={this.addSubmit.bind(this,this.props.callback)}>提交</Button>,
                ]}
            >
                <Form>
                    <FormItem label="要闻来源" {...formItemLayout}>  
                    {
                        getFieldDecorator('source', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }                                                                
                    </FormItem>
                    <FormItem label="要闻标题" {...formItemLayout}> 
                    {
                        getFieldDecorator('title', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }                                                                
                    </FormItem>
                    <FormItem label="要闻封面" {...formItemLayout}>
                        <Spin spinning={this.state.loading} style={{width:"80px"}}>
                            <img onClick={this.imageuploaded.bind(this)} style={{width:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                                src={this.state.addImgUrl ? this.state.addImgUrl :require('../../images/baseImg.png')}
                            />
                        </Spin>
                        {
                            this.state.imageflag?
                            <Uploadimg width={600} height={400} visible={this.state.imageflag} closeModal={this.closeFn.bind(this)} urlFn={this.urlFn.bind(this)}/>
                            :''
                        }
                    </FormItem>
                    <FormItem label="要闻内容" {...formItemLayout}>
                        {/* 富文本 */}            
                        <Ueditor  id="content" value={this.state.detail}  toolbars={2} height="200" />  
                    </FormItem>         
                </Form>
            </Modal>
        )
    }
}